<style lang="less" scoped>
  .box-panel {
    position: relative;
    min-height: 20vh;
  }

  .box-panel-header {
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .b-p-h-title {
    line-height: 34px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    color: #333;
  }

  .box-panel-body {
    padding: 25px 24px;
  }

  .box-body {
    width: 100%;
    min-height: 20vh;
  }
  .Paging_t{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .Paging_b {
    text-align: right;
    margin-top: 30px;
    margin-bottom: 20px;
  }
</style>

<template>
  <div class="box-panel">
    <div class="box-panel-header">
      <span class="b-p-h-title">{{item_title}}</span>
    </div>
    <div class="box-panel-body">
      <div class="block Paging_t">
        <el-pagination @size-change="size_change" @current-change="current_change" :current-page.sync="current_page"
          :page-sizes="page_sizes" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
          :total="total" v-if="total != 0"></el-pagination>
      </div>
      <div class="box-body">
        <el-table stripe :data="formData" :header-cell-style="{background:'#F5F7FA',color:'#606266'}" row-key="id"
          border :indent="20" style="width: 100%;min-width: 680px;">
          <el-table-column prop="user_id" label="操作用户id" min-width="10%">
          </el-table-column>
          <el-table-column prop="username" label="操作用户" min-width="15%">
          </el-table-column>
          <el-table-column prop="type" label="操作类型" min-width="15%">
          </el-table-column>
          <el-table-column prop="info" label="操作内容" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="time" label="操作时间" min-width="25%">
          </el-table-column>
        </el-table>
      </div>
      <div class="block Paging_b">
        <el-pagination @size-change="size_change" @current-change="current_change" :current-page.sync="current_page"
          :page-sizes="page_sizes" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
          :total="total" v-if="total != 0"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import $R from "../../js/common/request";
  import $P from "../../js/common/public";
  export default {
    data() {
      return {
        item_title: this.$route.meta.item_title,

        formData: [],

        // 翻页
        total: 0, //总条数
        page_size: $P.Page_sizes[0], //每页显示条数
        page_sizes: $P.Page_sizes, //每页显示条数可选择的数组
        current_page: 1 //当前页数
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        self = this;
        $P.openLoad();
        $R.Log.logList({
          params: Object.assign({ page: self.current_page, limit: self.page_size }),
          success(res) {
            self.formData = res.data;
            self.total = res.total;
            setTimeout(function () {
              $P.closeLoad();
            }, "200");
          },
          error() {
            $P.closeLoad();
          }
        });
      },

      //======================================翻页功能======================================
      // pageSize 改变时会触发  -- 切换当前显示条数
      size_change(val) {
        self = this;
        self.page_size = val;
        self.init();
      },
      //currentPage 改变时会触发 -- 翻页功能
      current_change(val) {
        self = this;
        self.current_page = val;
        self.init();
      },

    },
    computed: {}
  };
</script>